<template>
	<view>
		<view>
			<view class="list">
				<view class="" style="text-align: center;" v-if="list_KnSqVozu.length==0">
					<image src="../../static/dingdan.png" mode="scaleToFill"
						style="margin-top: 100rpx;width: 150rpx;height: 180rpx;"></image>
					<view class="" style="color: #999;font-size: 28rpx;margin-top: 20rpx;">
						暂无订单
					</view>
				</view>
				<view class="flex-col list-item" :key="i" v-for="(item, i) in list_KnSqVozu" style="margin-top: 20rpx;">
					<view class="flex-col group_2">
						<view class="justify-between">
							<view class="flex-row group_4 view_1" v-if="item.consultingWay=='电话咨询'">
								<image
									src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558044678223829469.png"
									class="image_3" />
								<text class="text_1">电话咨询</text>
							</view>
							<view class="flex-row group_4 view_1" v-if="item.consultingWay=='图文咨询'">
								<image
									src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558155417130254521.png"
									class="image_3" />
								<text class="text_1">图文咨询</text>
							</view>
							<view class="flex-row group_4 view_1" v-if="item.consultingWay=='包月咨询'">
								<image
									src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558155417132973951.png"
									class="image_3" />
								<text class="text_1">包月咨询</text>
							</view>
							<text class="text_3" v-if="item.orderTime!=null">下单时间：{{item.orderTime}}</text>
							<text class="text_3" v-else>下单时间：暂无</text>
						</view>
						<view class="flex-row group_5">
							<image :src="item.avatar" class="image_5" />
							<view class="group_6">
								<view class="flex-row">
									<text class="text_5" v-if="item.username!=null">{{item.username}}</text>
									<text class="text_5" v-else>正在加载中..</text>
									<view class="flex-col text-wrapper" v-if="item.levelInfo!=null"><text
											class="text_7">{{item.levelInfo}}</text></view>
									<view class="flex-col text-wrapper" v-else><text class="text_7">暂无</text></view>

								</view>
								<view class="flex-row">
									<view class="font-row">
										擅长领域：{{ item.hobby }}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="justify-between group_9">
						<view class="flex-row group_10 view_7">
							<text class="text_13">实付款：</text>
							<text class="text_15">￥</text>
							<text class="text_17" v-if="item.actualPrice!=null">{{item.actualPrice}}</text>
							<text class="text_17" v-else>0.00</text>
						</view>
						<view class="flex-row group_11 view_8">
							<text class="text_19">佣金：</text>
							<text class="text_21">￥</text>
							<text class="text_23" v-if="item.price!=null">{{item.price}}</text>
							<text class="text_23" v-else>0.00</text>
						</view>
					</view>
				</view>

				<view class="" v-show="isOver">
				    <u-loadmore :status="status" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getdistributionlist
	} from '../../api/index.js'
	export default {
		components: {},
		data() {
			return {
				list_KnSqVozu: [],
				pageNum: 1,
				pageSize: 10,
				isOver: false, //用来显示显隐提示语 isOver 默认值false  
				status: 'loading...',
				show: false
			};
		},
		//下拉到底部后加载新数据
		onReachBottom() {
			this.isOver = true;
			this.pageNum++; //页数加一
			this.getList(); //回调接口
		},
		onLoad() {
			this.getList()
		},
		methods: {
			async getList() {
				let data = {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				getdistributionlist(data).then(res => {
					const count = res.total
					if (this.list_KnSqVozu.length === count) {
						this.status = '我已经到底了-----'
						return
					}
					
					this.list_KnSqVozu = [...this.list_KnSqVozu, ...res.rows]
				})
			}
		},
	};
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style scoped lang="css">
	.list-item {
		background-color: #ffffff;
		border-radius: 0.47rem;
	}

	.group_2 {
		padding: 0.84rem 0.59rem 1.41rem 1rem;
		border-bottom: solid 0.031rem #e5e5e5;
	}

	.group_9 {
		padding: 0.81rem 0.41rem 0.84rem 1.63rem;
	}

	.group_5 {
		margin-top: 1.25rem;
	}

	.group_10 {
		width: 3.13rem;
		height: 3.13rem;
	}

	.group_11 {
		margin-left: 0.66rem;
		margin-top: 0.34rem;
		color: #333333;
		font-size: 1rem;
		font-family: SourceHanSansCN;
		font-weight: 500;
		line-height: 0.94rem;
	}

	.group_4 {
		flex-shrink: 0;
		filter: drop-shadow(0px 0.094rem 0.56rem #df891e36);
		width: 0.94rem;
		height: 0.94rem;
	}

	.text_3 {
		margin: 0.19rem 0 0.094rem;
		color: #999999;
		font-size: 0.69rem;
		font-family: SourceHanSansCN;
		line-height: 0.66rem;
		letter-spacing: -0.018rem;
	}

	.image_5 {
		width: 3.13rem;
		height: 3.13rem;
	}

	.group_6 {
		margin-left: 0.63rem;
		margin-top: 0.66rem;
	}

	.text_13 {
		color: #333333;
		font-size: 0.81rem;
		font-family: SourceHanSansCN;
		font-weight: 500;
		line-height: 0.78rem;
		letter-spacing: -0.021rem;
	}

	.text_15 {
		margin-top: 0.16rem;
		color: #e65943;
		font-size: 0.75rem;
		font-family: SourceHanSansCN;
		font-weight: 500;
		line-height: 0.59rem;
	}

	.text_17 {
		color: #e65943;
		font-size: 1rem;
		font-family: DINPro;
		font-weight: 700;
		line-height: 0.72rem;
	}

	.text_19 {
		color: #333333;
		font-size: 0.81rem;
		font-family: SourceHanSansCN;
		font-weight: 500;
		line-height: 0.81rem;
		letter-spacing: -0.021rem;
	}

	.text_21 {
		margin-top: 0.19rem;
		color: #ffa135;
		font-size: 0.75rem;
		font-family: SourceHanSansCN;
		font-weight: 500;
		line-height: 0.59rem;
	}

	.text_23 {
		color: #ffa135;
		font-size: 1rem;
		font-family: DINPro;
		font-weight: 700;
		line-height: 0.72rem;
	}

	.image_3 {
		flex-shrink: 0;
		filter: drop-shadow(0px 0.094rem 0.56rem #df891e36);
		width: 0.94rem;
		height: 0.94rem;
	}

	.text_1 {
		margin: 0.13rem 0 0.094rem 0.34rem;
		color: #333333;
		font-size: 0.75rem;
		font-family: SourceHanSansCN;
		font-weight: 500;
		line-height: 0.72rem;
	}

	.group_8 {
		margin-top: 0.47rem;
	}

	.text_5 {
		margin-bottom: 0.094rem;
		color: #333333;
		font-size: 1rem;
		font-family: SourceHanSansCN;
		font-weight: 500;
		line-height: 0.94rem;
	}

	.text-wrapper {
		margin-left: 0.38rem;
		margin-right: 5rem;
		padding: 0.13rem 0 0.22rem;
		background-color: #e6594300;
		border-radius: 0.5rem;
		height: 1.03rem;
		border: solid 0.031rem #e65943;
	}

	.text_9 {
		color: #666666;
		font-size: 0.69rem;
		font-family: SourceHanSansCN;
		line-height: 0.66rem;
	}

	.text_11 {
		color: #666666;
		font-size: 0.69rem;
		font-family: SourceHanSansCN;
		line-height: 0.66rem;
	}

	.text_7 {
		margin: 0 0.34rem;
		color: #e65943;
		font-size: 0.63rem;
		font-family: SourceHanSansCN;
		line-height: 0.63rem;
	}

	.group_1 {
		padding-top: 0.97rem;
		flex: 1 1 auto;
		height: 37.69rem;
		overflow-y: auto;
	}

	.list {
		padding-left: 0.97rem;
		padding-right: 0.91rem;
	}

	.view_7 {
		width: initial;
		height: initial;
	}

	.view_8 {
		margin-left: initial;
		margin-top: initial;
		color: initial;
		font-size: initial;
		font-family: initial;
		font-weight: initial;
		line-height: initial;
	}

	.view_1 {
		flex-shrink: initial;
		filter: initial;
		width: initial;
		height: initial;
	}

	.font-row {
		width: 60vw;
		font-size: 26rpx;
		color: #666666;
		margin-top: 15rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
</style>
